<!DOCTYPE html>
<html>

	<head lang="en">
		<title>找攻略</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/bootstrap/js/bootstrap.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
		<link rel="stylesheet" href="/css/reset.css" />
        <!--<link rel="stylesheet" href="/css/strategyCatalogs.css"/>-->
		<link rel="stylesheet" href="/css/strategyComment.css" />
		<script src="/js/plugins/jrender/jrender.js"></script>
		<!--<link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
		<script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>-->
        <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
        <script src="/js/plugins/dialog/dialog.min.js"></script>
        <script src="/js/common.js"></script>
		<script type="text/javascript" src="js/review/js/jquery.comment.js" ></script>
		<style>
			.container{
				width: 100%;
			}
			.commentbox{
				width: 1000px;
				margin: 20px auto;
			}
			.mytextarea {
				width: 40%;
				overflow: auto;
				word-break: break-all;
				height: 100px;
				color: #000;
				font-size: 1em;
				resize: none;
			}
			.comments-list{
				width: 800px;
				margin: 20px auto;
				clear: both;
				padding-top: 20px;
			}
			.comments-list .comment-info{
				position: relative;
				margin-bottom: 20px;
				margin-bottom: 20px;
				border-bottom: 1px solid #ccc;
			}
			.comments-list .comment-info header{
				width: 10%;
				position: absolute;
			}
			.comments-list .comment-info header img{
				width: 70%;
				border-radius: 50%;
				padding: 5px;
			}
			.comments-list .comment-info .comment-right{
				padding:5px 0px 5px 8%;
			}
			.comments-list .comment-info .comment-right h3{
				margin: 5px 0px;
			}
			.comments-list .comment-info .comment-right .comment-content-header{
				height: 25px;
			}
			.comments-list .comment-info .comment-right .comment-content-header span,.comments-list .comment-info .comment-right .comment-content-footer span{
				padding-right: 2em;
				color: #aaa;
			}
			.comments-list .comment-info .comment-right .comment-content-header span,.comments-list .comment-info .comment-right .comment-content-footer span.reply-btn,.send,.reply-list-btn{
				cursor: pointer;
			}
			.comments-list .comment-info .comment-right .reply-list {
				border-left: 3px solid #ccc;
				padding-left: 7px;
			}
			.comments-list .comment-info .comment-right .reply-list .reply{
				border-bottom: 1px dashed #ccc;
			}
			.comments-list .comment-info .comment-right .reply-list .reply div span{
				padding-left: 10px;
			}
			.comments-list .comment-info .comment-right .reply-list .reply p span{
				padding-right: 2em;
				color: #aaa;
			}
		</style>
		<script>
            var user = JSON.parse(sessionStorage.getItem("user"));
            $(function () {
                var id = getParams().id;
                var authorId;
				$.get("/comments/"+id,function (data) {
                    for (var i = 1; i <= data.star; i++) {
                        $("i[data-num=" + i + "]").attr("class", "fa fa-star fa-lg")
                    }
                    authorId = data.userId;
                    $("#strategyComment").renderValues(data,{
                       handle: function (ele, value) {
                           ele.href = "/userProfiles.html?id="+value;
                       },
                       handleCatalog: function (ele, value) {
                           ele.href = "/strategyCatalogs.html?strategyId="+value;
                       }
				   });

                });

                //-------------------------------------------------------- 评论
                //初始化数据
                var author;
                var pages;
                var currentPage = 1;
                var travels; //游记数组
                var arr = [];
                $.get("/reviews" , {"state":2,"essayId":id},function (data) {
                    console.log(data.list);
                    $("#total").html(data.total);
                    pages=data.pages;
                    arr = data.list;
                    travels = arr;
                    $(".comments-list").addCommentList({data:arr,add:""});
                });

                //当屏幕滚到最底部时执行函数
                $(window).scroll(function () {
                    //判断是否到底部
                    if (isEnd()) {
                        //判断是否有下一页
                        if (currentPage < pages) {
                            //设置当前页+1,并且发送ajax请求获取下一页数据
                            console.log(pages);
                            currentPage++;
                            $.get("/reviews", {currentPage: currentPage, state:2, essayId:id}, function (data) {
                                arr = data.list;
                                $(".comments-list").addCommentList({data:arr,add:""});
                            });
                        } else {
                            $(document).dialog({
                                type : "notice",
                                infoText: "已经到底部了",
                                autoClose: 1500,
                                position: "center"
                            });
                        }
                    }
                });
                $("#comment").click(function(){
                    if (user) {
                        var review =$("#content").val();
                        if (review) {
                            var json = {
                                "user.id": user.id,
                                "authorId": authorId,
                                "state": 2,
                                "essayId": id,
                                "review": review
                            };
                            $.post("/reviews", json, function (data) {
                                window.location.reload();
                            })
                        }else {
                            $(document).dialog({
                                type: 'confirm',
                                style: 'IOS',
                                titleText: "提示",
                                content: "评论为空",
                                buttons: [
                                    {
                                        name: '确定',
                                        callback: function () {
                                        }
                                    },
                                ]
                            });
						}
                    }else {
                        login();
                    }
                });

                //-------------------------------------------------------------------------------
            });

            function replyClick(el) {
                el.parent().parent().append("<div class='replybox'><textarea cols='80' rows='50' placeholder='来说几句吧......' class='mytextarea' ></textarea><span class='send'>发送</span></div>")
                    .find(".send").click(function () {
                    var content = $(this).prev().val();
                    if (content != "") {
                        if (!user){
                            login();
                        }
                        var parentEl = $(this).parent().parent().parent().parent();
                        var beReplyName = parentEl.find("h3").text();
                        if (beReplyName === user.nickName) {
                            $(document).dialog({
                                type: 'confirm',
                                style: 'IOS',
                                titleText: "提示",
                                content: "请不要回复自己!",
                                buttons: [
                                    {
                                        name: '确定',
                                        callback: function () {
                                            window.location.reload();
                                        }
                                    },
                                ]
                            });
                        } else {
                            var replyId = user.id;//当前回复评论的用户
                            var beReplyId = parentEl.find("h3").data("uid");//该评论的用户
                            var reviewId = parentEl.find("h3").data("reviewid");
                            var img = user.headImgUrl;
                            var json = {"img": img, "replyId": replyId, "reviewId": reviewId, "content": content};
                            $.post("/reviews/" + beReplyId + "/replies", json, function (data) {
                                window.location.reload();
                            })
                        }
                    } else {
                        alert("空内容");
                    }
                });
            }

            function login() {
                $(document).dialog({
                    type: "confirm",
                    style: "IOS",
                    titleShow: false,
                    content: "请登录",
                    buttons: [{
                        name: "跳转到登录界面",
                        callback: function () {
                            location.href = "/login.html";
                        }
                    }]
                });
                return;
            }
		</script>
		
	
	</head>

	<body>
		<div class="search-head">
			<div class="row nav-search">
				<div class="col">
					<a href="/strategyPage.html">
						<span><i class="fa fa-chevron-left"></i></span>
					</a>
				</div>
				<div class="col">
					<span>点评详情</span>
				</div>
				<div class="col"></div>
			</div>
		</div>

			<div class="comment">
			<div class="container ">
				<div class="row" id="strategyComment">
						<div class="col-2 comment-head">
							<a href="userProfiles.html"  data-id="43" render-key="userId" render-fun="handle">
								<img class="rounded-circle" render-src="uheadImgUrl">
							</a>
							<button class="btn" id="followBtn"><i class="fa fa-hand-o-right"> </i> 关注</button>
						</div>
						<div class="col">
							<span class="comment-star">
								<i class="fa fa-star-o fa-lg" style="color: #DFE823" data-num="1"></i>
								<i class="fa fa-star-o fa-lg" style="color: #DFE823" data-num="2"></i>
								<i class="fa fa-star-o fa-lg" style="color: #DFE823" data-num="3"></i>
								<i class="fa fa-star-o fa-lg" style="color: #DFE823" data-num="4"></i>
								<i class="fa fa-star-o fa-lg" style="color: #DFE823" data-num="5"></i>
							</span>

							<span class="comment-date" render-html="releaseTime"></span>
							<div class="comment-content">
								<p render-html="content"></p>
							</div>
							<ul class="comment-img" render-loop="singlePic"><li>
									<img  render-src="singlePic.pic">
								</li></ul>
							<div class="container tag">
								<div id="tags">

								</div>
							</div>

							<div class="comment-link">
								<a href="strategyCatalogs.html"  data-id="2"  render-key="strategyId" render-fun="handleCatalog">
									<img  render-src="scoverUrl"> <span render-html="stitle"></span>
									<i class="fa fa-angle-right fa-2x"></i>
								</a>
							</div>

						</div>
				</div>
			</div>

			<div class="count d-flex justify-content-between">
					<div class="p-2">评论: 共<span id="total"></span>条</div>
					<div class="p-2 likeBtn"><span class="likeNum"></span></div>
			</div>
			</div>
		<!-- ---------------------------评论----------------------- -->
		<!--评价部分开始-->
		<div class="container">
			<div class="commentbox">
				<textarea cols="80" rows="50" placeholder="来说几句吧......" class="mytextarea" id="content"></textarea>
			</div>
			<div class="btn btn-info pull-right" id="comment">评论</div>

			<div class="comments-list">

			</div>
		</div>
		<!-- ---------------------------评论----------------------- -->
	</body>

</html>